<template>
	<view class="container flex-column">
		<!-- 手机号 -->
		<view class="view-input flex-row center-row" style="margin-top: 100rpx;">
			<image class="input-lefticon" src="https://mcdn.chatgk.com/xcx/static/images/login/login_phone.png"
				mode="aspectFit"></image>
			<view class="view-line"></view>
			<input v-model="phone" @input="onInputChange" class="input" type="number" placeholder="请输入您的手机号"
				placeholder-class="input-placeholder" />
		</view>
		<!-- 验证码 -->
		<view class="view-input flex-row center-row" style="margin: 32rpx 0 32rpx 0;">
			<image class="input-lefticon" src="https://mcdn.chatgk.com/xcx/static/images/login/login_code.png"
				mode="aspectFit"></image>
			<view class="view-line"></view>
			<input class="input" v-model="code" text-content-type="oneTimeCode" @input="onInputChange" type="number"
				placeholder="请输入验证码" placeholder-class="input-placeholder" />
			<text class="button-code" :style="[time != 60 ? 'color: #D8D8D8':'']"
				@tap="onClickSendCode">{{codeText}}</text>
		</view>
		<!-- 密码 -->
		<view class="view-input flex-row center-row">
			<image class="input-lefticon" src="https://mcdn.chatgk.com/xcx/static/images/login/password.png"
				mode="aspectFit"></image>
			<view class="view-line"></view>
			<input class="input" v-model="password" :password="true" @input="onInputChange" placeholder="请输入新密码"
				placeholder-class="input-placeholder" />
		</view>
		<!-- 登陆 -->
		<button class="button-loging" :class="isAvailable ? 'available':''" @tap="onClickSubmit">确定</button>
		<!-- <loading v-show="loadshow"></loading> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadshow: false,
				codeText: '获取验证码',
				isAvailable: false, // 确定按钮是否可用
				time: 60,
				phone: "",
				code: "",
				password: "",
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.isUpdate ? "修改密码" : "忘记密码"
			})
		},
		methods: {
			// 点击发送验证码
			onClickSendCode() {
				if (this.phone.length == 0) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					})
					return
				}

				// uni.showLoading({
				// 	title: '发送中...',
				// 	mask: true
				// })
				this.loadshow = true
				this.$request.sendCode({
					"phone": this.phone
				}).then(res => {
					this.loadshow = false
					// uni.hideLoading()
					uni.showToast({
						title: "发送成功",
						icon: "success"
					})

					this.startCountdown()
				}).catch(err => {
					uni.hideLoading()
				})
			},
			// 输入框值改变
			onInputChange() {
				this.checkIsAvailable()
			},
			// 点击确定
			onClickSubmit() {
				this.loadshow = true
				if (this.isAvailable) {
					this.$request.editPwd({
						"phone": this.phone,
						"code": this.code,
						"password_new": this.password
					}).then(res => {
						this.loadshow = false
						uni.showToast({
							title: "修改成功",
							icon: "success"
						})

						uni.navigateBack()
					})
				}
			},
			// 检查确定按钮是否可用
			checkIsAvailable() {
				this.isAvailable = this.phone.length > 0 && this.code.length > 0 && this.password.length > 0
			},
			// 开始验证码倒计时
			startCountdown() {
				const time = this.time--
				this.codeText = time + 's'

				setTimeout(() => {
					if (time > 0) {
						this.startCountdown()
					} else {
						this.codeText = "获取验证码"
						this.time = 60
					}
				}, 1000)
			}
		}
	}
</script>

<style>
	button::after {
		border: none;
	}

	/* 设置 placeholder 的颜色 */
	::v-deep .input-placeholder {
		color: #CCCCCC !important;
		opacity: 1 !important;
		font-size: 28rpx !important;
	}

	.center-row {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.container {
		padding: 0 76rpx 0 76rpx;
	}

	.view-input {
		height: 80rpx;
		border: 2rpx solid #D8D8D8;
		border-radius: 20rpx;
	}

	.input-lefticon {
		width: 44rpx;
		height: 40rpx;
		margin: 0 30rpx 0 30rpx;
	}

	.view-line {
		width: 2rpx;
		height: 44rpx;
		background-color: #D8D8D8;
	}

	.input {
		width: 260rpx;
		color: #464646;
		caret-color: #464646;
		font-size: 28rpx;
		margin: 0 20rpx 0 38rpx;
	}

	.button-code {
		width: 150rpx;
		color: #FF3B0A;
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
	}

	.button-loging {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
		background: #FF3B0A;
		border-radius: 20rpx;
		margin-top: 150rpx;
	}

	.button-loging.available {
		background-color: #FF3B0A;
	}
</style>